<template>
    <div>
<<<<<<< HEAD
      <!-- 地图容器 -->
      <div ref="mapBox" style="height: 100%"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  // 封装一个加载地图函数
  const mapBox = ref(null);
  
  const loadMap = () => {
    AMapLoader.load({
      key: "7d20495f319f3625b9eceb55c62f3faa", // 申请好的 Web 端开发者 Key，调用 load 时必填
      version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
     .then((AMap) => {
        // 加载地图实例
        const map = new AMap.Map(mapBox.value, {
          pitch: 50, // 地图俯仰角度，有效范围 0 度 - 83 度
          viewMode: '3D', // 地图模式
          rotateEnable: true, // 是否开启地图旋转交互：鼠标右键 + 鼠标画圈移动 或 键盘 Ctrl + 鼠标左键画圈移动
          pitchEnable: true, // 是否开启地图倾斜交互：鼠标右键 + 鼠标上下移动或键盘 Ctrl + 鼠标左键上下移动 
          zoom: 17, // 初始化地图层级
          rotation: -15, // 初始化地图顺时针旋转的角度
          zooms: [2, 20], // 地图显示的缩放级别范围
          center: [119.920844,32.48863], // 初始地图中心经纬度
          terrain: true,
          mapStyle: "amap://styles/grey",
        });
  
        const traffic = new AMap.TileLayer.Traffic({
          autoRefresh: true, // 是否自动刷新，默认为 false
          interval: 180, // 刷新间隔，默认 180s
        });
        const position = new AMap.LngLat(119.920844,32.48863); // Marker 经纬度
        const marker = new AMap.Marker({
          position: position,
          title: '少年宫'
        });
        map.add(marker);
        map.add(traffic); // 通过 add 方法添加图层
      })
     .catch((e) => {
        console.error(e); // 加载错误提示
      });
  };
  
  onMounted(() => {
    loadMap();
  });
  </script>
  
  <style lang="less" scoped></style>
=======
        <!-- 地图容器 -->
        <div ref="mapBox" style="height: 100%;"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const mapBox = ref(null);
// 封装一个加载地图函数
const loadMap = () => {
    AMapLoader.load({
        key: "e2e99aa77c50633e7891440a6ce70e63", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            // 加载地图实例 
            const map = new AMap.Map(mapBox.value, {
                pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -15, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [120.84604,31.477954], //初始地图中心经纬度
                terrain: true //开启地形图
                // 设置地图样式 normal 
                // mapStyle: "amap://styles/darkblue",
            });
            const position = new AMap.LngLat(120.84604,31.477954); //Marker 经纬度
            const marker = new AMap.Marker({
                position: position,
                title: '浦东软件园'
            });
            map.add(marker);
            // const traffic = new AMap.TileLayer.Traffic({
            //     autoRefresh: true, //是否自动刷新，默认为false
            //     interval: 180, //刷新间隔，默认180s
            // });
            // map.add(traffic); //通过add方法添加图层
        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
};
onMounted(() => {
    loadMap()
});
</script>
<style lang="less" scoped></style>
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
